
//获取数据刷
function details() {
    let id = splitStrToObject(location.href).id
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        type: 'get',
        data: {
            id
        },
        success: function (rsp) {
            show(rsp)
            business(rsp.data.shop)
            zixi(rsp.data.detail.descContentList)
        },
        error: function (error) {
            console.log(error);
        }
    })
}
details()

//渲染页面
function show(list) {
    let str = `<div id="s">
               <div id="datu">
                   <img class="auu" src="${list.data.detail.photo[0].url}" alt="">
                   <img src="${list.data.detail.photo[1].url}" alt="">
                   <img src="${list.data.detail.photo[2].url}" alt="">
                   <img src="${list.data.detail.photo[3].url}" alt="">
                   <div class="kun"></div>

               </div>
               <div id='xiaotu'>
                   <img a='0' src="${list.data.detail.photo[0].url}" alt="">
                   <img a='1' src="${list.data.detail.photo[1].url}" alt="">
                   <img a='2' src="${list.data.detail.photo[2].url}" alt="">
                   <img a='3' src="${list.data.detail.photo[3].url}" alt="">
               </div>
               <div class="dd"><img src="${list.data.detail.photo[0].url}" alt=""></div>
           </div>`
    $('.g-left').html(str)

    let str1 = ` <h2>${list.data.share.title}</h2>
  
          <p class='price'>￥${list.data.detail.price}</p>
          <button class='jiaru'>加入购物车</button>`

    $('.g-right').html(str1)
    itme(list.data)
    imgs()
}
//商家信息
function business(itme) {
    let strS = ` <p>卖家信息</p>
            <img src="${itme.picUrl}" alt=""><br>
            <p class="one">${itme.nickname}</p>
            <p class="tow"> <span>描述</span>
                <span>服务</span>
                <span>物流</span>
            </p>
            <p class="sha"><span>${itme.deliveryScore}</span>
                <span>${itme.serviceScore}</span>
                <span>${itme.itemScore}</span>
            </p>`
    $('.g-2').html(strS)
}
//详细介绍
function zixi(itme) {
    let str_s = ``
    let str = itme.map((is, index) => {
        if (index <= 8) {
            return `<img src='${is.image.url}'></img><br>`
        } else {
            return
        }
    })
    str_s += str.join('')
    $('.d_img').html(str_s)
}
//放大镜
//光标移动位置
function imgs() {
    $('#datu').mousemove(function (e) {
        e = e || window.event
        let x = e.offsetX - $('.kun').width() / 2
        let y = e.offsetY - $('.kun').height() / 2
        if (x < 0) x = 0
        if (y < 0) y = 0
        if (x > $('#datu').width() - $('.kun').width()) x = $('#datu').width() -
            $('.kun').width()
        if (y > $('#datu').height() - $('.kun').height()) y = $('#datu').height() - $('.kun').height()
        $('.kun').css({
            top: y,
            left: x
        })
        let x1 = $('#datu').width() * $('.dd').width() / $('.kun').width()
        let y1 = $('#datu').height() * $('.dd').height() / $('.kun').height()
        $('.dd img').width(x1).height(y1)
        let x2 = $('.dd').width() / $('.kun').width() * x
        let y2 = $('.dd').height() / $('.kun').height() * y
        $('.dd img').css({
            top: `-${y2}px`,
            left: `-${x2}px`
        })
    })
    //显示隐藏
    $('#datu').hover(function () {
        $('.kun').css('display', 'block')
        $('.dd').css('display', 'block')
    }, function () {
        $('.kun').css('display', 'none')
        $('.dd').css('display', 'none')
    })
    //图片切换
    $('#xiaotu img').click(function () {
        let k = $(this).index()
        $('#datu img').removeClass('auu')
        $('#datu img').eq(k).addClass('auu')
        let imgs = $('#datu img').eq(k).clone()
        $('.dd').html(imgs)
    })
}

//持久化存储数据
function itme(rsp) {
    $('.jiaru').click(function () {
        let obj = {
            select: false,
            id: rsp.detail.id,
            name: rsp.detail.title,
            img: rsp.detail.image,
            price: rsp.detail.price,
            num: 1
        }
        let userStr = localStorage.getItem('commoditydata')
        userStr = JSON.parse(userStr) || []
        let existence = userStr.find((itme) => {
            return obj.id == itme.id
        })
        if (existence) {
            existence.num++
        } else {
            userStr.push(obj)
        }
        localStorage.setItem('commoditydata', JSON.stringify(userStr))
        location.href = 'mymall.html'
    })
}

